<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
    <input type="hidden" id="countId" th:value="${countId}">
    <input type="hidden" th:value="${ctx}" id="ctx" />

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>芝麻分数</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>实人认证</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="auth-pie-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>年龄分布</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="age-pie-chart"></div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>城市排行</h5> &nbsp;&nbsp;&nbsp;<span id="totalNumber"></span>
                    </div>
                    <div class="ibox-content">
<!--                        <div class="row">-->
<!--                            <div class="col-sm-12">-->
                                <ul class="stat-list" id="city_list">
                                </ul>
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>注册芝麻分</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="regZhima-pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script type="text/javascript">
	    $(function () {
            // 个数 / 成本
            $.post($('#ctx').val() + '/extend/countview/zhimaData/' + $('#countId').val(), function(result) {

                var pieoption = {
                    // title : {
                    //     text: '某站点用户访问来源',
                    //     subtext: '纯属虚构',
                    //     x:'center'
                    // },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        // data:['直接访问｜18','邮件营销｜18','联盟广告｜18','视频广告｜18','搜索引擎｜18']
                        data: result.data.titleList
                    },
                    calculable : true,
                    series : [
                        {
                            name:'芝麻分数',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: result.data.dataList
                            // data:[
                            //     {value:335, name:'直接访问｜18', label:'asd'},
                            //     {value:310, name:'邮件营销｜18', label:'vxz'},
                            //     {value:234, name:'联盟广告｜18', label:'wer'},
                            //     {value:135, name:'视频广告｜18', label:'hfg'},
                            //     {value:1548, name:'搜索引擎｜18', label:'bmnm'}
                            // ]
                        }
                    ]
                };

                var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            });

            $.post($('#ctx').val() + '/extend/countview/authData/' + $('#countId').val(), function(result) {
                var pieoption = {
                    // title : {
                    //     text: '某站点用户访问来源',
                    //     subtext: '纯属虚构',
                    //     x:'center'
                    // },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        // data:['直接访问｜18','邮件营销｜18','联盟广告｜18','视频广告｜18','搜索引擎｜18']
                        data: result.data.titleList
                    },
                    calculable : true,
                    series : [
                        {
                            name:'实人认证',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: result.data.dataList
                            // data:[
                            //     {value:335, name:'直接访问｜18', label:'asd'},
                            //     {value:310, name:'邮件营销｜18', label:'vxz'},
                            //     {value:234, name:'联盟广告｜18', label:'wer'},
                            //     {value:135, name:'视频广告｜18', label:'hfg'},
                            //     {value:1548, name:'搜索引擎｜18', label:'bmnm'}
                            // ]
                        }
                    ]
                };

                var pieChart = echarts.init(document.getElementById("auth-pie-chart"));
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            });

            $.post($('#ctx').val() + '/extend/countview/ageData/' + $('#countId').val(), function(result) {
                var pieoption = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data: result.data.titleList
                    },
                    calculable : true,
                    series : [
                        {
                            name:'实人认证',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: result.data.dataList
                        }
                    ]
                };

                var pieChart = echarts.init(document.getElementById("age-pie-chart"));
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            });

            $.post($('#ctx').val() + '/extend/countview/cityData/' + $('#countId').val(), function(result) {

                $("#totalNumber").html(result.data.totalNumber)
                var html = '';
                for (var index = 0; index < result.data.dataList.length; index++){
                    var item = result.data.dataList[index]
                    html = html + '<li>\n' +
                        '<small>'+item.province+'-'+item.city+'</small>\n' +
                        '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                        '</div>\n' +
                        '<div class="progress progress-mini">\n' +
                        '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                        '</div>\n' +
                        '</li>';
                }
                $('#city_list').html(html);

            });

            $.post($('#ctx').val() + '/extend/countview/registerZhima/' + $('#countId').val(), function(result) {

                var pieoption = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data: result.data.titleList
                    },
                    calculable : true,
                    series : [
                        {
                            name:'注册芝麻分',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: result.data.dataList
                        }
                    ]
                };

                var pieChart = echarts.init(document.getElementById("regZhima-pie-chart"));
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            });

	    });

    </script>
</body>
</html>